<template>
	<view>
        
		<view class="_table" :class="hasdel?'hasdel':'notdel'" :style="{'--col':'auto '.repeat(tableData.thead.length).trim(),'text-align':align}">
			
            <view class="_th" v-for="(item,i) in tableData.thead" :key="i"
            :style="{'width':item.width?item.width+'rpx':''}"
            >{{item.name}}</view>
			<view class="_td" :class="item.isFlex?'isFlex':''"  
            v-for="(item,i) in tableData.tbody" :key="i+'td'" 
            :style="{'grid-area': item.gridArea||'unset','display':item.gridArea=='auto'|| (item.value=='' && !item.isedit)?'none':'','color':item.color,'backgroundColor':item.bgColor,'text-align':item.align}">
			
        
                <template v-if="item.isedit">
                    <template v-if="item.input == 'date'">
                        <picker mode="date" :value="item.value" :data-index="i" :data-id="item.isedit" :data-type="item.type"  @change="bindDateChange">
                            <view class="inputt">{{item.value || '请选择'}}</view>
                        </picker>
                    </template>
                    <template v-else>
                        <input type="text" class="inputt" v-model="item.value" :data-id="item.isedit" :data-type="item.type" @input="inputt">
                    </template>    
    
                </template>
                <template v-else>
                    {{item.value}}
                </template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Lists",
		props:{
            proplist:Array,
			align:String,
            oid:Number,
            hasdel:{
                type:Boolean,
                default:true
            },
            keyval:{
                type:Object,
                default:{}
            }
		},
		data() {
			return {
                tableData:{
                    thead:[
                        {
                            name:'序号'
                        },
                        {
                            name:'名称'
                        },{
                            name:'生产位置',
                            width:120
                        },{
                            name:'具体部件',
                            width:120
                        },{
                            name:'外协(W)',
                            width:150
                        },{
                            name:'木工(M)',
                            width:150
                        },{
                            name:'金工(M)',
                            width:150
                        },{
                            name:'油漆(Y)',
                            width:150
                        },{
                            name:'包装(B)',
                            width:150
                        },{
                            name:'停留时间',
                            width:150
                        },{
                            name:'计划进度',
                            width:150
                        },{
                            name:'校正进度',
                            width:150
                        },
                        
                    ],
                    tbody:[]
                },
                delbigs:[],
                delones:[],
			};
		},
        created() {
          // this.updatetable()  
        },
        methods:{
            bindDateChange(e){
                this.tableData.tbody[e.currentTarget.dataset.index].value = e.detail.value
                var id = e.currentTarget.dataset.id
                var type = e.currentTarget.dataset.type
                var value = e.detail.value
                this.keyval[`key_${id}`][type] = value
            },
            inputt(e){
                var id = e.currentTarget.dataset.id
                var type = e.currentTarget.dataset.type
                var value = e.detail.value
                this.keyval[`key_${id}`][type] = value
            },
            updatetable(){
                console.log('草尼马为啥不更新   在',this.tableData)
                this.formatproplist()
            },
       
         
            formatproplist(){
                
                var i = 1;
                var row = 2
                var gridrow = 2
                var tableData = [];
                var i1=2;
             
         
                this.proplist.forEach((item,index)=>{
                    if(item.child.length>=1){
                        item.child.forEach((val,ind)=>{
                            var tbody = []
                        
                            tbody[0] = {value:i}
                            if(ind == 0){
                                gridrow = row
                            }
                            
                            if(ind + 1 >= item.child.length ){
                                if(item.child.length>1){
                                    var gridArea_1 = [gridrow,i1,row+1,i1]
                                    tbody[1] = {value:item.title || ' ',gridArea:gridArea_1.join('/'),isimg:true}  
                                }else{
                                    tbody[1] = {value:item.title || ' ',isimg:true}
                              
                                }
                         
                            }else{
                                tbody[1] = {value:""}
                            }
                            tbody[2] = {value:val.position || ' '}
    
                            tbody[3] = {value:val.title || ' '}
                            tbody[4] =  {value:val.wx || ' ',isedit:val.id,type:'wx',input:'date'},
                            tbody[5] =  {value:val.mg || ' ',isedit:val.id,type:'mg',input:'date'},
                            tbody[6] =  {value:val.jg || ' ',isedit:val.id,type:'jg',input:'date'},
                            tbody[7] =  {value:val.yq || ' ',isedit:val.id,type:'yq',input:'date'},
                            tbody[8] =  {value:val.bz || ' ',isedit:val.id,type:'bz',input:'date'},
                            tbody[9] =  {value:val.hold || ' ',isedit:val.id,type:'hold',input:'num'},
                            tbody[10] =  {value:val.plan || ' ',isedit:val.id,type:'plan',input:'num'},
                            tbody[11] =  {value:val.check || ' ',isedit:val.id,type:'check',input:'num'},
                            
                       
                       
                            i ++
                            row ++
                            tableData = tableData.concat(tbody)
                        })
                    }else{
                        var tbody = []
                
                        tbody[0] = {value:i}
                        gridrow = row
                        
                        tbody[1] = {value:item.title}
                        tbody[2] = {value:" "}
                        tbody[3] =  {value:" "}
                        tbody[4] =  {value:" "}
                        tbody[5] =  {value:" "}
                        tbody[6] =  {value:" "}
                        tbody[7] =  {value:" "}
                        tbody[8] =  {value:" "}
                        tbody[9] =  {value:" "}
                        tbody[10] = {value:" "}
                        tbody[11] = {value:" "}
                     
                        console.log(tbody)
                        i ++
                        row ++
                        tableData = tableData.concat(tbody)
                    }
                    
                  
                })
            
                this.tableData.tbody = tableData
                var _this = this
             
                
                // 
            },
        }
	}
</script>

<style lang="scss" scoped>
	$tb-pd: 4px 8px;
	$tb-color: #c7c9ce;
	@mixin isFlex() {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	._table{
		width: 100%;
		box-sizing: border-box;
		border-left: 1px solid $tb-color;
		border-right: 1px solid $tb-color;
		border-top: 1px solid $tb-color;
		// border: 1px solid $tb-color;
		grid-template-columns:  var(--col);
		display: grid; 
		overflow: auto;
		white-space: break-spaces;
	}
	._th{
		text-align: center;
		padding: $tb-pd;
		font-size:26rpx;
		font-weight: bold;
		border-right: 1px solid $tb-color;
		border-bottom: 1px solid $tb-color;
        min-width: 80rpx;
		@include isFlex;
	
	}
	._td{
        min-width: 80rpx;
		padding: $tb-pd;
		font-size:24rpx;
		border-right: 1px solid $tb-color;
		border-bottom: 1px solid $tb-color;
        display: flex;
        align-items: center;
        justify-content: center;

	}
	.isFlex{
		@include isFlex;
	}
	// 固定表头样式
	.fixed-thead{
		display: grid;
		grid-template-columns:  var(--col);
	}
	.fiexd_td{
		visibility: collapse;
	}
    image{
        width: 30rpx;
        height: 30rpx;
    }
    .edit{
      text{
          color: #2979ff;
      }
    }
    .hasdel{
        ._th,._td{
            &:nth-child(12n){
            	border-right: none;
            }
        }
    }
    .notdel{
        ._th,._td{
            &:nth-child(12n){
            	border-right: none;
            }
        }
    }
    .inputt{
        min-height: 1.4em;
        min-width: 100rpx;
        // height: 100%;
        border-bottom:1px solid #999;
        font-size: 24rpx;
    }
</style>